<template>
  <div id="app">
    <el-container>
      <el-header>
        <h1>法考打字练习系统</h1>
      </el-header>
      <el-main>
        <typing-exercise />
      </el-main>
      <el-footer>
        <p>© 2025 法考打字练习 - 助力法考客观题备考</p>
      </el-footer>
    </el-container>
  </div>
</template>

<script setup>
import TypingExercise from './components/TypingExercise.vue'


</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;

  .el-container {
    max-width: 1200px;
    margin: 0 auto;

    .el-header {
      h1 {
        color: #409EFF;
        margin: 0;
        padding: 20px 0;
      }
    }

    .el-footer {
      margin-top: 40px;
      color: #909399;
      font-size: 14px;
    }
  }
}
</style>
